<html>
<header>
    <link rel="stylesheet" href="/codemirror/lib/codemirror.css">
    <!--引入css文件，用以支持主题-->
    <link rel="stylesheet" href="/codemirror/theme/dracula.css"/>
    <script src="/codemirror/lib/codemirror.js"></script>
    <script src="/codemirror/mode/htmlembedded/htmlembedded.js"></script>
    <script src="/codemirror/mode/javascript/javascript.js"></script>
    <script src="/js/jquery.js"></script>
    <style>
        .CodeMirror {
            width: 100%;
            height: 100%;
        }
    </style>
</header>

<body>
<textarea id="codeContent"></textarea>
</body>
<script>
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "getCode",
            success: function (resp) {
                /*响应成功，遍历json格式的字符串*/
                $("#codeContent").val(resp.code)
                var editor = CodeMirror.fromTextArea(document.getElementById("codeContent"), {
                    mode: "htmlembedded",
                    mode: "javascript",
                    lineNumbers: true,    //显示行号
                    theme: "dracula",    //设置主题
                    lineWrapping: true,    //代码折叠
                    foldGutter: true,
                    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
                    matchBrackets: true,    //括号匹配
                    readOnly: false,        //只读
                });
            }
        })
    })


</script>
</html>